<template>
  <div class="page">
    <div class="head">
      <h1>{{ $t('排行榜') }}</h1>
    </div>
    

    <div class="filter">
     <ul>
          <li>猴毛：***</li>
          <li>L猴毛：***</li>
          <li>原力：***</li> 
       </ul>
      </div>
  	<div class="filter">
     <ul>
          <li>昨日产值：***</li>
          
          <li>
          <help class="help">          
		      <div>
		        <p>城堡有8个方向每个方向8个城堡，总计64个城堡。</p>
		      </div>
		   </help>
		   </li> 
       </ul>
      </div>
    <!--排行榜-->
      <div class="filter">
        <ul class="status">
          <li v-for="(item, index) in category" :class="{'active': index == activeRank}" @click="changeRank(index)" :key="index">{{item}}</li>
        </ul>
      </div>
    
    <div class="panel no-padding" v-if="activeRank == 0">
      <div class="title">
        <h4>猴毛排行榜</h4>
      </div>
      <x-table :cell-bordered="false" :content-bordered="false" class="rank">
        <thead>
          <tr>
            <th :class="{'active': item.value == userType}" @click="userRank(item.value)" v-for="(item,index) in userTitle" :key="index">{{item.name}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in userRankList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.monkeyNum }}</td>
            
          </tr>
        </tbody>
      </x-table>
    </div>
    <div class="panel no-padding" v-if="activeRank == 1">
      <div class="title">
        <h4>L猴毛排行榜</h4>
      </div>
      <x-table :cell-bordered="false" :content-bordered="false" class="rank">
        <thead>
          <tr>
            <th :class="{'active': item.value == monkeyType}" @click="monkeyRank(item.value)" v-for="(item,index) in monkeyTitle" :key="index">{{item.name}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in monkeyRankList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>#{{ item.id }}</td>
            <td>{{ item.generation }}</td>
            
          </tr>
        </tbody>
      </x-table>
    </div>
    <div class="panel no-padding" v-if="activeRank == 2">
      <div class="title">
        <h4>原力排行榜</h4>
      </div>
      <x-table :cell-bordered="false" :content-bordered="false" class="rank">
        <thead>
          <tr>
            <th v-for="(item,index) in towerTitle" :key="index">{{item.name}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in towerRankList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.castleName }}</td>
            <td>{{ item.sprofit | toFix(1) }}</td>
           
          </tr>
        </tbody>
      </x-table>
    </div>
    <!--流水-->
    <div class="filter">
        <ul class="status">
          <li v-for="(item, index) in categorys" :class="{'active': index == activeRanks}" @click="changeRanks(index)" :key="index">{{item}}</li>
        </ul>
      </div>
      <div class="panel no-padding" v-if="activeRanks == 0">
      <div class="title">
        <h4>猴毛流水</h4>
      </div>
      <x-table :cell-bordered="false" :content-bordered="false" class="rank">
        <thead>
          <tr>
            <th :class="{'active': item.value == userType}" @click="userRank(item.value)" v-for="(item,index) in userTitle" :key="index">{{item.name}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in userRankList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.monkeyNum }}</td>
            
          </tr>
        </tbody>
      </x-table>
    </div>
    <div class="panel no-padding" v-if="activeRanks == 1">
      <div class="title">
        <h4>L猴毛流水</h4>
      </div>
      <x-table :cell-bordered="false" :content-bordered="false" class="rank">
        <thead>
          <tr>
            <th :class="{'active': item.value == monkeyType}" @click="monkeyRank(item.value)" v-for="(item,index) in monkeyTitle" :key="index">{{item.name}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in monkeyRankList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>#{{ item.id }}</td>
            <td>{{ item.generation }}</td>
            
          </tr>
        </tbody>
      </x-table>
    </div>
    <div class="panel no-padding" v-if="activeRanks == 2">
      <div class="title">
        <h4>原力流水</h4>
      </div>
      <x-table :cell-bordered="false" :content-bordered="false" class="rank">
        <thead>
          <tr>
            <th v-for="(item,index) in towerTitle" :key="index">{{item.name}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in towerRankList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.castleName }}</td>
            <td>{{ item.sprofit | toFix(1) }}</td>
           
          </tr>
        </tbody>
      </x-table>
    </div>
  </div>
</template>

<script>
  import {
    XTable,
    Countup,
    Grid,
    GridItem,
    Sticky
  } from 'vux'
  import Help from './common/help.vue'
  import lottery from './common/lottery.vue'
  export default {
    components: {
      XTable,
      Countup,
      lottery,
      Grid,
      GridItem,
      Sticky,
      Help
    },
    data() {
      return {
        userTitle: [{
            name: '#',
            value: 0
          },
          {
            name: '昵称',
            value: 0
          },
          {
            name: '猴毛',
            value: 1
          },
          
        ],
        monkeyTitle: [{
            name: '#',
            value: 0
          },
          {
            name: '昵称',
            value: 0
          },
          {
            name: 'L猴毛',
            value: 1
          },
        ],
        towerTitle: [{
            name: '#',
            value: 0
          },
          {
            name: '昵称',
            value: 0
          },
          {
            name: '原力',
            value: 1
          },
        ],
        userRankList: [],
        monkeyRankList: [],
        towerRankList: [],
        res: null,
        userType: 1,
        monkeyType: 1,
        towerType: 1,
        category: ['猴毛排行','L猴毛排行','原力排行'],
        categorys: ['猴毛流水','L猴毛流水','原力流水'],
        activeRank: 0,
        activeRanks: 0,
        otherRank1: [],
        otherRank2: [],
        otherRank3: [],
        otherRank4: [],
        day: [
          {name: '昨日', value: -1},
          {name: '今日', value: 0}
        ],
        activeDay: 0
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.userRank()
        this.monkeyRank()
        this.towerRank()
        this.getData()
      });
    },
    methods: {
      getData() {
        this.$http
          .post(`/common/statisticsData`)
          .then(res => {
            if (res.code == 200) {
              this.res = res.result
            } else {}
          })
          .catch(function(error) {});
      },
      otherRank() {
        this.$http
          .get(`gameRankList/rank?type=${this.otherRankType}&offset=${this.activeDay}`)
          .then(res => {
            if (res.code == 200) {
              switch (this.otherRankType) {
                case 1:
                  this.otherRank1 = res.result
                  break;
                case 2:
                  this.otherRank2 = res.result
                  break;
                case 3:
                  this.otherRank3 = res.result
                  break;
                case 4:
                  this.otherRank4 = res.result
                  break;
              }
            } else {}
          })
          .catch(function(error) {});
      },
      changeDay(day) {
        this.activeDay = day
        this.otherRank()
      },
      userRank(type) {
        if (type == 0) {
          return
        }
        this.$vux.loading.show({
          text: this.$t('查询中')
        })
        this.userType = type || 1
        this.$http
          .post(`/common/userRankData`, {
            type: type
          })
          .then(res => {
            this.$vux.loading.hide()
            if (res.code == 200) {
              this.userRankList = res.result;
            } else {}
          })
          .catch(function(error) {});
      },
      monkeyRank(type) {
        if (type == 0) {
          return
        }
        this.$vux.loading.show({
          text: this.$t('查询中')
        })
        this.monkeyType = type || 1
        this.$http
          .post(`/common/monkeyRankData`, {
            type: type
          })
          .then(res => {
            this.$vux.loading.hide()
            if (res.code == 200) {
              this.monkeyRankList = res.result;
            } else {}
          })
          .catch(function(error) {});
      },
      towerRank(type) {
        if (type == 0) {
          return
        }
        this.$vux.loading.show({
          text: this.$t('查询中')
        })
        this.towerType = type || 1
        this.$http
          .post(`/common/towerRankData`, {
            type: type
          })
          .then(res => {
            this.$vux.loading.hide()
            if (res.code == 200) {
              this.towerRankList = res.result;
            } else {}
          })
          .catch(function(error) {});
      },
      changeRank(index) {
        this.activeRank = index
        if(index > 2) {
          this.otherRankType = index - 2
          this.activeDay = 0
          this.otherRank()
        }
      },
      changeRanks(index) {
        this.activeRanks = index
        if(index > 2) {
          this.otherRankType = index - 2
          this.activeDay = 0
          this.otherRank()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .rank {
    margin-top: 12px;
    &:after {
      display: none;
    }
    td:before {
      display: none;
    }
    th:before {
      display: none;
    }
    a {
      color: $link;
    }
    font-size: 12px;
    color: #333;
    thead {
      background: #f8f8f8;
      color: $grey;
      cursor: pointer;
      .active:after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 12px;
        height: 100%;
        background: url() no-repeat 50%;
        background-size: 16px 12px;
      }
    }
    tr:nth-child(even) {
      background: #f8f8f8;
    }
    .award {
      tr:nth-child(1) {
        background: linear-gradient(135deg, #FDD819 0%, #E80505 100%);
      }
      tr:nth-child(2) {
        background: linear-gradient(135deg, #FFFE9F 0%, #FCA180 100%);
      }
      tr:nth-child(3) {
        background: linear-gradient(135deg, #DEFCF9 0%, #C3BEF0 100%);
        
      }
    }
    .award1 {
      tr:nth-child(1) {
        background: linear-gradient(135deg, #FDD819 0%, #E80505 100%);
      }
    }
  }
  .filter {
    display: flex;
    justify-content: space-between;
    white-space: nowrap; // flex-wrap: wrap;
    font-size: 12px;
    background: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    margin: 0 8px 12px;
    border-radius: 4px;
    box-shadow: 3px 3px 10px 0px rgba(158, 158, 158, 0.4);
    overflow-x: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      display: flex;
      align-items: center;
      li {
        cursor: pointer;
      }
    }
    .status {
      color: $grey;
      li {
        transition: all .3s;
      }
      li:not(:last-child) {
        margin-right: 12px;
      }
      .active {
        color: $green;
        font-size: 14px;
        border-bottom: 2px solid $green;
      }
    }
  }
  .panel {
    h4 {
      padding-left: 12px;
      color: #799ac9;
      span {
        font-size: 10px;
        color: $grey;
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .day {
        display: flex;
        li {
          margin-right: 5px;
          font-size: 14px;
          color: #ccc;
        }
        .active {
          color: $green;
        }
      }
    }
  }
  .filter {
    font-size: 14px;
    color: $tmdark;
    padding-right: 12px;
    position: relative;
    cursor: pointer;
    span {
      vertical-align: middle;
    }
    .gen {
      display: inline-block;
      font-size: 12px;
      color: #fff;
      background: #799ac9;
      border-radius: 2px;
      padding: 0 5px;
    }
    .list {
      position: absolute;
      top: 30px;
      right: 0;
      z-index: 10;
      background: #fff;
      border: 1px solid $tmdark;
      width: 60px;
      text-align: center;
      border-radius: 5px;
      box-shadow: 0px 4px 12px 0px rgba(158, 158, 158, 0.3);
      overflow: hidden;
      height: 0;
      opacity: 0;
      transition: all .3s;
      li {
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        cursor: pointer;
        &+li {
          border-top: 1px solid #f1f1f1;
        }
        &:last-child {
          color: $red;
        }
      }
      .active {
        background: #799ac9;
        color: #fff;
      }
      &.show-list {
        height: 226px;
        opacity: 1;
      }
    }
  }
  .data {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 33.33%;
      text-align: center;
      padding: 5px 0;
      span {
        font-size: 20px;
        color: $gray;
      }
      p {
        font-size: 12px;
        color: $grey;
      }
    }
  }
  .help {
    text-align: center;
    font-weight: 500;
    color: $tmdark;
    font-size: 22px;
  }
</style>

<style lang="scss">
  .no-padding {
    padding: 12px 0!important;
  }
  .menu-gird {
    &:before,
    &:after {
      display: none;
    }
    a {
      &:before,
      &:after {
        display: none;
      }
    }
    .weui-grid__icon {
      width: 50px;
      height: 50px;
    }
  }
</style>
